
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>YUI Library Examples: DataTable: DataTable + DataSource.Get + JSON Data</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    	<link rel="stylesheet" type="text/css" href="../../assets/yui.css" >

<style>
    /*Supplemental CSS for the YUI distribution*/
    #custom-doc { width: 95%; min-width: 950px; }
    #pagetitle {background-image: url(../../assets/bg_hd.gif);}
/*    #pagetitle h1 {background-image: url(../../assets/title_h_bg.gif);}*/
</style>

<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yui/yui-min.js"></script>
<style type="text/css">
/* custom styles for this example */
.dt-example {margin:1em;}

/* css to counter global site css */
.dt-example th {text-transform:none;}
.dt-example table {width:auto;}
.dt-example caption {display:table-caption;}
</style>
</head>
<body id="yahoo-com" class="yui3-skin-sam  yui-skin-sam">
<div id="custom-doc" class="yui-t2">
<div id="hd">
	<div id="ygunav">
		<p>
            <em>
                <a href="http://developer.yahoo.com/yui/3/">YUI 3.x Home</a> <i> - </i>	
            </em>
		</p>
		<form action="http://search.yahoo.com/search" id="sitesearchform">
            <input name="vs" type="hidden" value="developer.yahoo.com">
            <input name="vs" type="hidden" value="yuiblog.com">
			<input name="vs" type="hidden" value="yuilibrary.com">
		    <div id="sitesearch">
		    	<label for="searchinput">Site Search (YDN, YUILibrary &amp; YUIBlog): </label>
			    <input type="text" id="searchinput" name="p">
			    <input type="submit" value="Search" id="searchsubmit" class="ygbt">
		    </div>
		</form>
    </div>
	<div id="ygma"><a href="../../"><img src="../../assets/logo.gif"  border="0" width="200" height="93"></a></div>
	<div id="pagetitle"><h1>YUI Library Examples: DataTable: DataTable + DataSource.Get + JSON Data</h1></div>
</div>
<div id="bd">


	<div id="yui-main">
		<div class="yui-b">
		  <div class="yui-ge">
			  <div class="yui-u first example" id="main">

	<h2>DataTable: DataTable + DataSource.Get + JSON Data</h2>

	<div id="example" class="promo">
	<div class="example-intro">
	<p>This example shows how to populate a DataTable with data from the Yahoo! Local webservice retrieved via a YQL query. First we create a DataSource.Get instance pointing to YQL, then using the DataTableDataSource plugin we can load data for pizza places near our office.</p>

<p>In this example, we render the DataTable first, then load data into it in a separate call.</p>	</div>

	<div class="module example-container ">
			<div class="hd exampleHd">
			<p class="newWindowButton yui-skin-sam">
                <a href="datatable_dsget_clean.html" target="_blank">View example in new window.</a>
            </p>
		</div>		<div id="example-canvas" class="bd">

	
	<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->

	<div id="pizza" class="dt-example"></div>

<script type="text/javascript">
YUI({ filter: 'raw' }).use("datasource-get", "datasource-jsonschema", "datatable-base", "datatable-datasource", function (Y) {
    var cols = ["Title", "Phone", {key:"Rating.AverageRating", label:"Rating"}];
    ds = new Y.DataSource.Get({
        source:"http://query.yahooapis.com/v1/public/yql?format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys"})
        .plug(Y.Plugin.DataSourceJSONSchema, {
        schema: {
            resultListLocator: "query.results.Result",
            resultFields: ["Title", "Phone", "Rating.AverageRating"]
        }
    }),
    dt = new Y.DataTable.Base({columnset:cols, summary:"Pizza places near 98089", caption:"Table with JSON data from YQL"}).plug(Y.Plugin.DataTableDataSource, {datasource:ds});
    dt.render("#pizza");
    dt.datasource.load({request:"&q=select%20*%20from%20local.search%20where%20zip%3D%2794089%27%20and%20query%3D%27pizza%27"});
});
</script>

	<!--END SOURCE CODE FOR EXAMPLE =============================== -->

	
		</div>
	</div>
	</div>

	<h2>Populating Your DataTable with Remote Data Using DataSource.Get</h2>

<p>Your table can be easily popluated with remote JSON data from a webservice by creating a DataSource instance and using the DataTableDataSource plugin to load the data into a DataTable.</p>

<p>Start with the <code>use()</code> statement:</p>

<div id="syntax-b917d23a658d09e46d68d39e2c82eb39" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">YUI<span class="br0">&#40;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">&quot;datasource-get&quot;</span><span class="sy0">,</span> <span class="st0">&quot;datasource-jsonschema&quot;</span><span class="sy0">,</span> <span class="st0">&quot;datatable-datasource&quot;</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">YUI<span class="br0">&#40;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">&quot;datasource-get&quot;</span><span class="sy0">,</span> <span class="st0">&quot;datasource-jsonschema&quot;</span><span class="sy0">,</span> <span class="st0">&quot;datatable-datasource&quot;</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span>
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;</pre></div><textarea id="syntax-b917d23a658d09e46d68d39e2c82eb39-plain">YUI().use("datasource-get", "datasource-jsonschema", "datatable-datasource", function(Y) {
});
</textarea></div>
<p>Next create a DataSource.Get instance pointing to YQL. The <a href="http://developer.yahoo.com/yql/console/">YQL Console</a> makes it easy to determine the REST URL we want to send. You also need to define the correct schema for the DataSourceJSONSchema plugin. This is a good time to call <code>sendRequest</code> to make sure the data returns as expected.</p>

<div id="syntax-9983633feb131cdef8694193048d60c4" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="kw2">var</span> dataSource <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">DataSource</span>.<span class="me1">Get</span><span class="br0">&#40;</span><span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    source<span class="sy0">:</span> <span class="st0">&quot;http://query.yahooapis.com/v1/public/yql?&quot;</span><span class="sy0">+</span></div></li><li class="li1"><div class="de1">        <span class="st0">&quot;q=select%20*%20from%20local.search%20where%20zip%3D%2794089%27%20&quot;</span><span class="sy0">+</span></div></li><li class="li1"><div class="de1">        <span class="st0">&quot;and%20query%3D%27pizza%27&amp;format=json&amp;&quot;</span><span class="sy0">+</span></div></li><li class="li2"><div class="de2">        <span class="st0">&quot;env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&quot;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">dataSource.<span class="me1">plug</span><span class="br0">&#40;</span>Y.<span class="me1">Plugin</span>.<span class="me1">DataSourceJSONSchema</span><span class="sy0">,</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    schema<span class="sy0">:</span> <span class="br0">&#123;</span></div></li><li class="li2"><div class="de2">        resultListLocator<span class="sy0">:</span> <span class="st0">&quot;query.results.Result&quot;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">        resultFields<span class="sy0">:</span> <span class="br0">&#91;</span><span class="st0">&quot;Title&quot;</span><span class="sy0">,</span> <span class="st0">&quot;Phone&quot;</span><span class="sy0">,</span> <span class="st0">&quot;Rating.AverageRating&quot;</span><span class="br0">&#93;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li2"><div class="de2">dataSource.<span class="me1">sendRequest</span><span class="br0">&#40;</span><span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    callback<span class="sy0">:</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        success<span class="sy0">:</span> <span class="kw2">function</span><span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">            Y.<span class="me1">log</span><span class="br0">&#40;</span>e<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">        <span class="br0">&#125;</span></div></li><li class="li2"><div class="de2">    <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="kw2">var</span> dataSource <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">DataSource</span>.<span class="me1">Get</span><span class="br0">&#40;</span><span class="br0">&#123;</span>
    source<span class="sy0">:</span> <span class="st0">&quot;http://query.yahooapis.com/v1/public/yql?&quot;</span><span class="sy0">+</span>
        <span class="st0">&quot;q=select%20*%20from%20local.search%20where%20zip%3D%2794089%27%20&quot;</span><span class="sy0">+</span>
        <span class="st0">&quot;and%20query%3D%27pizza%27&amp;format=json&amp;&quot;</span><span class="sy0">+</span>
        <span class="st0">&quot;env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&quot;</span>
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
dataSource.<span class="me1">plug</span><span class="br0">&#40;</span>Y.<span class="me1">Plugin</span>.<span class="me1">DataSourceJSONSchema</span><span class="sy0">,</span> <span class="br0">&#123;</span>
    schema<span class="sy0">:</span> <span class="br0">&#123;</span>
        resultListLocator<span class="sy0">:</span> <span class="st0">&quot;query.results.Result&quot;</span><span class="sy0">,</span>
        resultFields<span class="sy0">:</span> <span class="br0">&#91;</span><span class="st0">&quot;Title&quot;</span><span class="sy0">,</span> <span class="st0">&quot;Phone&quot;</span><span class="sy0">,</span> <span class="st0">&quot;Rating.AverageRating&quot;</span><span class="br0">&#93;</span>
    <span class="br0">&#125;</span>
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
dataSource.<span class="me1">sendRequest</span><span class="br0">&#40;</span><span class="br0">&#123;</span>
    callback<span class="sy0">:</span> <span class="br0">&#123;</span>
        success<span class="sy0">:</span> <span class="kw2">function</span><span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span>
            Y.<span class="me1">log</span><span class="br0">&#40;</span>e<span class="br0">&#41;</span><span class="sy0">;</span>
        <span class="br0">&#125;</span>
    <span class="br0">&#125;</span>
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;</pre></div><textarea id="syntax-9983633feb131cdef8694193048d60c4-plain">var dataSource = new Y.DataSource.Get({
    source: "http://query.yahooapis.com/v1/public/yql?"+
        "q=select%20*%20from%20local.search%20where%20zip%3D%2794089%27%20"+
        "and%20query%3D%27pizza%27&format=json&"+
        "env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys"
});

dataSource.plug(Y.Plugin.DataSourceJSONSchema, {
    schema: {
        resultListLocator: "query.results.Result",
        resultFields: ["Title", "Phone", "Rating.AverageRating"]
    }
});

dataSource.sendRequest({
    callback: {
        success: function(e) {
            Y.log(e);
        }
    }
});
</textarea></div>
<p>Now that the DataSource is created properly, define the columns that you want your table to show. These columns map directly to the parameter names returned in the data.</p>

<div id="syntax-6897e5675886de629dd79e35a62d8137" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="kw2">var</span> cols <span class="sy0">=</span> <span class="br0">&#91;</span></div></li><li class="li1"><div class="de1">    <span class="st0">&quot;Title&quot;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">    <span class="st0">&quot;Phone&quot;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#123;</span> key<span class="sy0">:</span> <span class="st0">&quot;Rating.AverageRating&quot;</span><span class="sy0">,</span> label<span class="sy0">:</span> <span class="st0">&quot;Rating&quot;</span> <span class="br0">&#125;</span></div></li><li class="li2"><div class="de2"><span class="br0">&#93;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="kw2">var</span> cols <span class="sy0">=</span> <span class="br0">&#91;</span>
    <span class="st0">&quot;Title&quot;</span><span class="sy0">,</span>
    <span class="st0">&quot;Phone&quot;</span><span class="sy0">,</span>
    <span class="br0">&#123;</span> key<span class="sy0">:</span> <span class="st0">&quot;Rating.AverageRating&quot;</span><span class="sy0">,</span> label<span class="sy0">:</span> <span class="st0">&quot;Rating&quot;</span> <span class="br0">&#125;</span>
<span class="br0">&#93;</span><span class="sy0">;</span>
&nbsp;</pre></div><textarea id="syntax-6897e5675886de629dd79e35a62d8137-plain">var cols = [
    "Title",
    "Phone",
    { key: "Rating.AverageRating", label: "Rating" }
];
</textarea></div>
<p>Now you are ready to create a DataTable using the columns you have defined. When you plug the instance with the DataTableDataSource plugin, point to your DataSource instance. After you render the table, load the data via the plugin.</p>

<div id="syntax-229b285a350f6de26fa27e1d4b48f854" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">YUI<span class="br0">&#40;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">&quot;datasource-get&quot;</span><span class="sy0">,</span> <span class="st0">&quot;datasource-jsonschema&quot;</span><span class="sy0">,</span> <span class="st0">&quot;datatable-datasource&quot;</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1"><span class="kw2">var</span> table <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">DataTable</span>.<span class="me1">Base</span><span class="br0">&#40;</span><span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    columnset<span class="sy0">:</span> cols<span class="sy0">,</span></div></li><li class="li1"><div class="de1">    summary<span class="sy0">:</span><span class="st0">&quot;Pizza places near 98089&quot;</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2">    caption<span class="sy0">:</span><span class="st0">&quot;Table with JSON data from YQL&quot;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">table.<span class="me1">plug</span><span class="br0">&#40;</span>Y.<span class="me1">Plugin</span>.<span class="me1">DataTableDataSource</span><span class="sy0">,</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    datasource<span class="sy0">:</span> dataSource</div></li><li class="li2"><div class="de2"><span class="br0">&#125;</span><span class="br0">&#41;</span>.<span class="me1">render</span><span class="br0">&#40;</span><span class="st0">&quot;#pizza&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">table.<span class="me1">datasource</span>.<span class="me1">load</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">YUI<span class="br0">&#40;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">&quot;datasource-get&quot;</span><span class="sy0">,</span> <span class="st0">&quot;datasource-jsonschema&quot;</span><span class="sy0">,</span> <span class="st0">&quot;datatable-datasource&quot;</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span>
<span class="kw2">var</span> table <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">DataTable</span>.<span class="me1">Base</span><span class="br0">&#40;</span><span class="br0">&#123;</span>
    columnset<span class="sy0">:</span> cols<span class="sy0">,</span>
    summary<span class="sy0">:</span><span class="st0">&quot;Pizza places near 98089&quot;</span><span class="sy0">,</span>
    caption<span class="sy0">:</span><span class="st0">&quot;Table with JSON data from YQL&quot;</span>
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
table.<span class="me1">plug</span><span class="br0">&#40;</span>Y.<span class="me1">Plugin</span>.<span class="me1">DataTableDataSource</span><span class="sy0">,</span> <span class="br0">&#123;</span>
    datasource<span class="sy0">:</span> dataSource
<span class="br0">&#125;</span><span class="br0">&#41;</span>.<span class="me1">render</span><span class="br0">&#40;</span><span class="st0">&quot;#pizza&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
table.<span class="me1">datasource</span>.<span class="me1">load</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;</pre></div><textarea id="syntax-229b285a350f6de26fa27e1d4b48f854-plain">YUI().use("datasource-get", "datasource-jsonschema", "datatable-datasource", function(Y) {
var table = new Y.DataTable.Base({
    columnset: cols,
    summary:"Pizza places near 98089",
    caption:"Table with JSON data from YQL"
});

table.plug(Y.Plugin.DataTableDataSource, {
    datasource: dataSource
}).render("#pizza");

table.datasource.load();
</textarea></div>
<p>One final change you can make is to split the URL between the DataSource <code>source</code> value and the <code>request</code> value sent to the DataTableDataSource plugin. Splitting the URL this way facilitates making future requests to the same DataSource.  You can see this in the <a href="#fullcode">Full Code Listing</a> below.</p>

<h2 id="fullcode">Full Code Listing</h2>

<div id="syntax-ce300ca5eb2fc60d0055f2ff25dd9184" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">YUI<span class="br0">&#40;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">&quot;datasource-get&quot;</span><span class="sy0">,</span> <span class="st0">&quot;datasource-jsonschema&quot;</span><span class="sy0">,</span> <span class="st0">&quot;datatable-datasource&quot;</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="kw2">var</span> cols <span class="sy0">=</span> <span class="br0">&#91;</span></div></li><li class="li1"><div class="de1">            <span class="st0">&quot;Title&quot;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">            <span class="st0">&quot;Phone&quot;</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2">            <span class="br0">&#123;</span> key<span class="sy0">:</span> <span class="st0">&quot;Rating.AverageRating&quot;</span><span class="sy0">,</span> label<span class="sy0">:</span> <span class="st0">&quot;Rating&quot;</span> <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">        <span class="br0">&#93;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">    <span class="kw2">var</span> dataSource <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">DataSource</span>.<span class="me1">Get</span><span class="br0">&#40;</span><span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        source<span class="sy0">:</span> <span class="st0">&quot;http://query.yahooapis.com/v1/public/yql?&amp;&quot;</span> <span class="sy0">+</span></div></li><li class="li2"><div class="de2">                <span class="st0">&quot;format=json&amp;env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&quot;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">    dataSource.<span class="me1">plug</span><span class="br0">&#40;</span>Y.<span class="me1">Plugin</span>.<span class="me1">DataSourceJSONSchema</span><span class="sy0">,</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        schema<span class="sy0">:</span> <span class="br0">&#123;</span></div></li><li class="li2"><div class="de2">            resultListLocator<span class="sy0">:</span> <span class="st0">&quot;query.results.Result&quot;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">            resultFields<span class="sy0">:</span> <span class="br0">&#91;</span><span class="st0">&quot;Title&quot;</span><span class="sy0">,</span> <span class="st0">&quot;Phone&quot;</span><span class="sy0">,</span> <span class="st0">&quot;Rating.AverageRating&quot;</span><span class="br0">&#93;</span></div></li><li class="li1"><div class="de1">        <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li2"><div class="de2">    <span class="kw2">var</span> table <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">DataTable</span>.<span class="me1">Base</span><span class="br0">&#40;</span><span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        columnset<span class="sy0">:</span> cols<span class="sy0">,</span></div></li><li class="li1"><div class="de1">        summary<span class="sy0">:</span> <span class="st0">&quot;Pizza places near 98089&quot;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">        caption<span class="sy0">:</span> <span class="st0">&quot;Table with JSON data from YQL&quot;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">&nbsp;</div></li><li class="li1"><div class="de1">    table.<span class="me1">plug</span><span class="br0">&#40;</span>Y.<span class="me1">Plugin</span>.<span class="me1">DataTableDataSource</span><span class="sy0">,</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        datasource<span class="sy0">:</span> dataSource</div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span><span class="br0">&#41;</span>.<span class="me1">render</span><span class="br0">&#40;</span><span class="st0">&quot;#pizza&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li2"><div class="de2">    <span class="co1">// Load the data into the table</span></div></li><li class="li1"><div class="de1">    table.<span class="me1">datasource</span>.<span class="me1">load</span><span class="br0">&#40;</span><span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        request<span class="sy0">:</span> <span class="st0">&quot;&amp;q=select%20*%20from%20local.search%20&quot;</span> <span class="sy0">+</span></div></li><li class="li1"><div class="de1">                 <span class="st0">&quot;where%20zip%3D%2794089%27%20and%20query%3D%27pizza%27&quot;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">&nbsp;</div></li><li class="li1"><div class="de1">    <span class="co1">// Make another request later</span></div></li><li class="li1"><div class="de1">    <span class="co1">//table.datasource.load({</span></div></li><li class="li1"><div class="de1">    <span class="co1">//    request: &quot;&amp;q=select%20*%20from%20local.search%20&quot; +</span></div></li><li class="li1"><div class="de1">    <span class="co1">//             &quot;where%20zip%3D%2794089%27%20and%20query%3D%27chinese%27&quot;</span></div></li><li class="li2"><div class="de2">    <span class="co1">//});</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">YUI<span class="br0">&#40;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">&quot;datasource-get&quot;</span><span class="sy0">,</span> <span class="st0">&quot;datasource-jsonschema&quot;</span><span class="sy0">,</span> <span class="st0">&quot;datatable-datasource&quot;</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span>
    <span class="kw2">var</span> cols <span class="sy0">=</span> <span class="br0">&#91;</span>
            <span class="st0">&quot;Title&quot;</span><span class="sy0">,</span>
            <span class="st0">&quot;Phone&quot;</span><span class="sy0">,</span>
            <span class="br0">&#123;</span> key<span class="sy0">:</span> <span class="st0">&quot;Rating.AverageRating&quot;</span><span class="sy0">,</span> label<span class="sy0">:</span> <span class="st0">&quot;Rating&quot;</span> <span class="br0">&#125;</span>
        <span class="br0">&#93;</span><span class="sy0">;</span>
&nbsp;
    <span class="kw2">var</span> dataSource <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">DataSource</span>.<span class="me1">Get</span><span class="br0">&#40;</span><span class="br0">&#123;</span>
        source<span class="sy0">:</span> <span class="st0">&quot;http://query.yahooapis.com/v1/public/yql?&amp;&quot;</span> <span class="sy0">+</span>
                <span class="st0">&quot;format=json&amp;env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&quot;</span>
    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
    dataSource.<span class="me1">plug</span><span class="br0">&#40;</span>Y.<span class="me1">Plugin</span>.<span class="me1">DataSourceJSONSchema</span><span class="sy0">,</span> <span class="br0">&#123;</span>
        schema<span class="sy0">:</span> <span class="br0">&#123;</span>
            resultListLocator<span class="sy0">:</span> <span class="st0">&quot;query.results.Result&quot;</span><span class="sy0">,</span>
            resultFields<span class="sy0">:</span> <span class="br0">&#91;</span><span class="st0">&quot;Title&quot;</span><span class="sy0">,</span> <span class="st0">&quot;Phone&quot;</span><span class="sy0">,</span> <span class="st0">&quot;Rating.AverageRating&quot;</span><span class="br0">&#93;</span>
        <span class="br0">&#125;</span>
    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
    <span class="kw2">var</span> table <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">DataTable</span>.<span class="me1">Base</span><span class="br0">&#40;</span><span class="br0">&#123;</span>
        columnset<span class="sy0">:</span> cols<span class="sy0">,</span>
        summary<span class="sy0">:</span> <span class="st0">&quot;Pizza places near 98089&quot;</span><span class="sy0">,</span>
        caption<span class="sy0">:</span> <span class="st0">&quot;Table with JSON data from YQL&quot;</span>
    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
    table.<span class="me1">plug</span><span class="br0">&#40;</span>Y.<span class="me1">Plugin</span>.<span class="me1">DataTableDataSource</span><span class="sy0">,</span> <span class="br0">&#123;</span>
        datasource<span class="sy0">:</span> dataSource
    <span class="br0">&#125;</span><span class="br0">&#41;</span>.<span class="me1">render</span><span class="br0">&#40;</span><span class="st0">&quot;#pizza&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
    <span class="co1">// Load the data into the table</span>
    table.<span class="me1">datasource</span>.<span class="me1">load</span><span class="br0">&#40;</span><span class="br0">&#123;</span>
        request<span class="sy0">:</span> <span class="st0">&quot;&amp;q=select%20*%20from%20local.search%20&quot;</span> <span class="sy0">+</span>
                 <span class="st0">&quot;where%20zip%3D%2794089%27%20and%20query%3D%27pizza%27&quot;</span>
    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
    <span class="co1">// Make another request later</span>
    <span class="co1">//table.datasource.load({</span>
    <span class="co1">//    request: &quot;&amp;q=select%20*%20from%20local.search%20&quot; +</span>
    <span class="co1">//             &quot;where%20zip%3D%2794089%27%20and%20query%3D%27chinese%27&quot;</span>
    <span class="co1">//});</span>
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;</pre></div><textarea id="syntax-ce300ca5eb2fc60d0055f2ff25dd9184-plain">YUI().use("datasource-get", "datasource-jsonschema", "datatable-datasource", function(Y) {
    var cols = [
            "Title",
            "Phone",
            { key: "Rating.AverageRating", label: "Rating" }
        ];

    var dataSource = new Y.DataSource.Get({
        source: "http://query.yahooapis.com/v1/public/yql?&" +
                "format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys"
    });

    dataSource.plug(Y.Plugin.DataSourceJSONSchema, {
        schema: {
            resultListLocator: "query.results.Result",
            resultFields: ["Title", "Phone", "Rating.AverageRating"]
        }
    });

    var table = new Y.DataTable.Base({
        columnset: cols,
        summary: "Pizza places near 98089",
        caption: "Table with JSON data from YQL"
    });

    table.plug(Y.Plugin.DataTableDataSource, {
        datasource: dataSource
    }).render("#pizza");
    
    // Load the data into the table
    table.datasource.load({
        request: "&q=select%20*%20from%20local.search%20" +
                 "where%20zip%3D%2794089%27%20and%20query%3D%27pizza%27"
    });

    // Make another request later
    //table.datasource.load({
    //    request: "&q=select%20*%20from%20local.search%20" +
    //             "where%20zip%3D%2794089%27%20and%20query%3D%27chinese%27"
    //});
});
</textarea></div>
				</div>
				<div class="yui-u sidebar">
	
					<div id="examples" class="mod box4">
                        <div class="hd">
						<h4>
    DataTable Examples:</h4>
                        </div>
						<div class="bd">
							<ul>
								<li><a href='../datatable/datatable_basic.html'>Basic DataTable</a></li><li class='selected'><a href='../datatable/datatable_dsget.html'>DataTable + DataSource.Get + JSON Data</a></li><li><a href='../datatable/datatable_dsio.html'>DataTable + DataSource.IO + XML Data</a></li><li><a href='../datatable/datatable_formatting.html'>Formatting Row Data for Display</a></li><li><a href='../datatable/datatable_nestedcols.html'>Nested Column Headers</a></li><li><a href='../datatable/datatable_sort.html'>Column Sorting</a></li><li><a href='../datatable/datatable_scroll.html'>Scrolling DataTable</a></li>							</ul>
						</div>
					</div>

					<div class="mod box4">
                        <div class="hd">
						<h4>More DataTable Resources:</h4>
                        </div>
                        <div class="bd">
						<ul>
							<!-- <li><a href="http://developer.yahoo.com/yui/datatable/">User's Guide</a> (external)</li> -->
<li><a href="../../api/module_datatable.html">API Documentation</a></li></ul>
                        </div>
					</div>
			  </div>
		</div>

		</div>
	</div>


<div class="yui-b toc3" id="tocWrapper">
<!-- TABLE OF CONTENTS -->
<div id="toc">
	
<ul>
<li class="sect first">YUI 3 Resources</li><li class="item"><a title="YUI 3 -- Yahoo! User Interface (YUI) Library" href="http://developer.yahoo.com/yui/3/">YUI 3 Web Site</a></li><li class="item"><a title="Examples of every YUI utility and control in action" href="../../examples/">YUI 3 Examples</a></li><li class="item"><a title="Instantly searchable API documentation for the entire YUI library." href="../../api/">YUI 3 API Docs</a></li><li class="item"><a title="YUI 3 Dependency Configurator -- configure your custom YUI implementation" href="http://developer.yahoo.com/yui/3/configurator/index.html">YUI 3 Dependency Configurator</a></li><li class="item"><a title="The YUI 3 Forum on YUILibrary.com" href="http://yuilibrary.com/forum/viewforum.php?f=15">YUI 3 Forums (external)</a></li><li class="item"><a title="Found a bug or a missing feature? Let us know on YUILibrary.com." href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/license.html">YUI License</a></li><li class="item"><a title="Download and fork the YUI project on GitHub" href="http://github.com/yui">YUI on Github</a></li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUI Blog (external)</a></li><li class="sect">YUI 3 Core - Examples</li><li class="item"><a title="YUI Global Object - Functional Examples" href="../../examples/yui/index.html">YUI Global Object</a></li><li class="item"><a title="Event - Functional Examples" href="../../examples/event/index.html">Event</a></li><li class="item"><a title="Node - Functional Examples" href="../../examples/node/index.html">Node</a></li><li class="sect">YUI 3 Component Infrastructure - Examples</li><li class="item"><a title="Attribute - Functional Examples" href="../../examples/attribute/index.html">Attribute</a></li><li class="item"><a title="Plugin - Functional Examples" href="../../examples/plugin/index.html">Plugin</a></li><li class="item"><a title="Widget - Functional Examples" href="../../examples/widget/index.html">Widget</a></li><li class="sect">YUI 3 Utilities - Examples</li><li class="item"><a title="Animation - Functional Examples" href="../../examples/anim/index.html">Animation</a></li><li class="item"><a title="AsyncQueue - Functional Examples" href="../../examples/async-queue/index.html">AsyncQueue</a></li><li class="item"><a title="Cache - Functional Examples" href="../../examples/cache/index.html">Cache</a></li><li class="item"><a title="Cookie - Functional Examples" href="../../examples/cookie/index.html">Cookie</a></li><li class="item"><a title="DataSchema - Functional Examples" href="../../examples/dataschema/index.html">DataSchema <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataSource - Functional Examples" href="../../examples/datasource/index.html">DataSource <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataType - Functional Examples" href="../../examples/datatype/index.html">DataType <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Drag &amp; Drop - Functional Examples" href="../../examples/dd/index.html">Drag &amp; Drop</a></li><li class="item"><a title="Get - Functional Examples" href="../../examples/get/index.html">Get</a></li><li class="item"><a title="History - Functional Examples" href="../../examples/history/index.html">History <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="IO - Functional Examples" href="../../examples/io/index.html">IO</a></li><li class="item"><a title="ImageLoader - Functional Examples" href="../../examples/imageloader/index.html">ImageLoader</a></li><li class="item"><a title="Internationalization - Functional Examples" href="../../examples/intl/index.html">Internationalization</a></li><li class="item"><a title="JSON (JavaScript Object Notation) - Functional Examples" href="../../examples/json/index.html">JSON</a></li><li class="item"><a title="JSONP (JSON with Padding) - Functional Examples" href="../../examples/jsonp/index.html">JSONP <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Recordset - Functional Examples" href="../../examples/recordset/index.html">Recordset <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Resize - Functional Examples" href="../../examples/resize/index.html">Resize <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Sortable - Functional Examples" href="../../examples/sortable/index.html">Sortable <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Stylesheet - Functional Examples" href="../../examples/stylesheet/index.html">Stylesheet</a></li><li class="item"><a title="Transition - Functional Examples" href="../../examples/transition/index.html">Transition <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Uploader - Functional Examples" href="../../examples/uploader/index.html">Uploader <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="YQL Query - Functional Examples" href="../../examples/yql/index.html">YQL Query <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Widgets - Examples</li><li class="item"><a title="AutoComplete - Functional Examples" href="../../examples/autocomplete/index.html">AutoComplete <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Charts - Functional Examples" href="../../examples/charts/index.html">Charts <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="selected "><a title="DataTable - Functional Examples" href="../../examples/datatable/index.html">DataTable <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Dial - Functional Examples" href="../../examples/dial/index.html">Dial <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Editor - Functional Examples" href="../../examples/editor/index.html">Editor <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Overlay - Functional Examples" href="../../examples/overlay/index.html">Overlay <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="ScrollView - Functional Examples" href="../../examples/scrollview/index.html">ScrollView <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Slider - Functional Examples" href="../../examples/slider/index.html">Slider <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="TabView - Functional Examples" href="../../examples/tabview/index.html">TabView <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Node Plugins - Examples</li><li class="item"><a title="FocusManager Node Plugin - Functional Examples" href="../../examples/node-focusmanager/index.html">FocusManager Node Plugin <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="MenuNav Node Plugin - Functional Examples" href="../../examples/node-menunav/index.html">MenuNav Node Plugin <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 CSS - Examples</li><li class="item"><a title="YUI Base - Functional Examples" href="../../examples/cssbase/index.html">CSS Base</a></li><li class="item"><a title="YUI Fonts - Functional Examples" href="../../examples/cssfonts/index.html">CSS Fonts</a></li><li class="item"><a title="YUI Grids - Functional Examples" href="../../examples/cssgrids/index.html">CSS Grids <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="YUI CSS Reset - Functional Examples" href="../../examples/cssreset/index.html">CSS Reset</a></li><li class="sect">YUI 3 Developer Tools - Examples</li><li class="item"><a title="Console - Functional Examples" href="../../examples/console/index.html">Console <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Console Filters Plugin- Functional Examples" href="../../examples/console-filters/index.html">Plugin.ConsoleFilters <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Profiler - Functional Examples" href="../../examples/profiler/index.html">Profiler</a></li><li class="item"><a title="Test - Functional Examples" href="../../examples/test/index.html">Test</a></li><li class="sect">Other Useful YUI 3 Resources</li><li class="item"><a title="Answers to Frequently Asked Questions about the YUI Library" href="http://developer.yahoo.com/yui/articles/faq/">YUI FAQ (external)</a></li><li class="item"><a title="Yahoo!'s philosophy of Graded Browser Support" href="http://developer.yahoo.com/yui/articles/gbs/">Graded Browser Support (external)</a></li><li class="item"><a title="Videos and podcasts from the YUI Team and from the Yahoo! frontend engineering community." href="http://developer.yahoo.com/yui/theater/">YUI Theater (external)</a></li></ul>
</div>
</div>
	</div><!--closes bd-->

	<div id="ft">
        <p class="first">Copyright &copy; 2011 Yahoo! Inc. All rights reserved.</p>
        <p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> - 
            <a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> - 
            <a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> - 
            <a href="http://careers.yahoo.com/">Job Openings</a></p>
	</div>
</div>
<script language="javascript"> 
var yuiConfig = { filter: 'raw' };
</script>
<script src="../../assets/syntax.js"></script>
<script src="../../assets/dpSyntaxHighlighter.js"></script>
<script language="javascript"> 
dp.SyntaxHighlighter.HighlightAll('code'); 
</script>
</body>
</html>
